<!--
  - Copyright (c) 2021.  北京维数科技有限公司
  - Date :  2019/4/8
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.0.0
  -->

<template>
  <div class="app-container calendar-list-container no-padding">
    <el-row>
      <div class="xf-tabletop-handles">
        <div class="xf-tabhd-left">
        </div>
        <div class="xf-tabhd-right">
          通知方式
          <el-select v-model="listQuery.noticeType" placeholder="请选择" class="xf-query-select" size="mini">
            <el-option v-for="(item,index) in noticeOpt" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          接收电话
          <el-input v-model="listQuery.mobilePhone" placeholder="请输入接收电话" class="xf-query-input" clearable size="mini"></el-input>
          <el-button @click="tableQuery" type="primary" size="mini">查询</el-button>
        </div>
      </div>
    </el-row>
    <el-table key='tableKey' :data="list" v-loading.body="listLoading" style="width: 100%">
      <el-table-column label="推送时间">
        <template slot-scope="scope">
          <span>{{scope.row.noticeTime}}</span>
        </template>
      </el-table-column>
      <el-table-column label="报警时间">
        <template slot-scope="scope">
          <span>{{scope.row.alarmTime}}</span>
        </template>
      </el-table-column>
      <el-table-column label="推送内容">
        <template slot-scope="scope">
          <span>{{scope.row.noticeContent}}</span>
        </template>
      </el-table-column>
      <el-table-column label="所属系统">
        <template slot-scope="scope">
          <span>{{scope.row.channelName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="接收账号">
        <template slot-scope="scope">
          <span>{{scope.row.username}}</span>
        </template>
      </el-table-column>
      <el-table-column label="接收电话">
        <template slot-scope="scope">
          <span>{{scope.row.mobilePhone}}</span>
        </template>
      </el-table-column>
      <el-table-column label="服务方">
        <template slot-scope="scope">
          <span>{{scope.row.serviceSupplyName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="推送结果">
        <template slot-scope="scope">
          <span>{{scope.row.noticeResult}}</span>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,15,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
    </div>
  </div>
</template>

<script>


  import {
    page,
  } from "@/api/datahandler/ruleslog";

  export default {
    name: "rulesLog",
    data() {
      return {
        list: null,
        total: null,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 10,
          mobilePhone: "",
          noticeType: "",
        },
        noticeOpt:[
          {
            value:'',
            label:'全部'
          },
          {
            value:'0',
            label:'APP',
          },
          {
            value:'1',
            label:'短信',
          },
          {
            value:'2',
            label:'语音电话',
          },
        ],
        tableKey: 0,
      };
    },
    created() {
      this.getList();
    },
    methods: {
      tableQuery() {
        this.getList();
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
      getList() {
        this.listLoading = true;
        page(this.listQuery).then(response => {
          this.list = response.data.rows;
          this.total = response.data.total;
          this.listLoading = false;
        });
      },
    }
  };
</script>
<style rel="stylesheet/scss" lang="scss">
  .xf-query-input,
  .xf-query-select {
    width: 200px;
    margin: 0 10px;
  }
  .fulldialog > div {
    width: 500px;
    margin: 0 auto;
  }
  .fulldialog .el-dialog__title {
    font-size: 32px;
  }
  .fulldialog {
    .el-dialog__header {
      margin-top: 20px;
    }
    .custom-dialog-btn {
      position: absolute;
      font-size: 30px;
      left: 40px;
      top: 20px;
      color: #fff;
      &:hover {
        cursor: pointer;
      }
    }
    .dialog-footer {
      text-align: left;
    }
    //   带下拉选择的输入
    .tmselect .el-input {
      width: 80px;
    }
    .input-with-select .el-input-group__append {
      background-color: #fff;
    }
  }
</style>
